import { SetupContext, computed, defineComponent, ref, watch } from 'vue';
import { DynamicFormGroupPropsType, dynamicFormGroupProps } from './dynamic-form-group.props';
import Label from '../dynamic-form-label/dynamic-form-label.component';
import { useTypeResolver } from '../../composition/use-type-resolver';

export default defineComponent({
    name: 'FDynamicFormGroup',
    props: dynamicFormGroupProps,
    emits: [],
    setup(props: DynamicFormGroupPropsType, context: SetupContext) {
        const id = ref(props.id);
        const customClass = ref(props.customClass);
        const editor = ref(props.editor);
        const label = ref(props.label);
        const modelValue = ref(props.modelValue);
        const readonly = ref(props.readonly);
        const required = ref(props.required);
        const showLabel = ref(props.showLabel);
        const type = ref(props.type);

        const { resolveEditorProps, resolveEditorType } = useTypeResolver();

        const conditionItemClass = computed(() => {
            const classObject = {
                'form-group': true,
                'farris-form-group': true,
                'common-group': true,
                'q-state-readonly': readonly.value
            } as Record<string, boolean>;
            return classObject;
        });

        function onChange(newValue: any) {
            modelValue.value = newValue;
            context.emit('update:modelValue', newValue);
        }

        const renderConditionEditor = computed(() => {
            const Component = resolveEditorType(editor.value.type);
            const editorProps = resolveEditorProps(editor.value.type, editor.value);
            return () => <Component {...editorProps} v-model={modelValue.value} onChange={onChange}></Component>;
        });

        function getDraggingDisplayText() {
            return label.value;
        }

        watch(
            [
                () => props.id,
                () => props.customClass,
                () => props.editor,
                () => props.label,
                () => props.modelValue,
                () => props.readonly,
                () => props.required,
                () => props.showLabel
            ],
            ([newId, newCustomClass, newEditor, newLabel, newModelValue, newReadonly, newRequired, newShowLabel]) => {
                id.value = newId;
                customClass.value = newCustomClass;
                editor.value = newEditor;
                label.value = newLabel;
                modelValue.value = newModelValue;
                readonly.value = newReadonly;
                required.value = newRequired;
                showLabel.value = newShowLabel;
            }
        );

        return () => {
            return (
                <div id={`${id.value}-input-group`} class={customClass.value}>
                    <div class="farris-group-wrap">
                        <div class={conditionItemClass.value}>
                            {showLabel.value && (
                                <Label id={`${id.value}-lable`} required={required.value} text={label.value} title={label.value}></Label>
                            )}
                            <div class="farris-input-wrap">{renderConditionEditor.value()}</div>
                        </div>
                    </div>
                </div>
            );
        };
    }
});
